<!-- 帮我找房 -->
<template>
	<view>
		<findroom v-if="type != 11" :getcity="getcity"></findroom>
		<view v-else>
			<view class="u-flex m-bg-w u-p-t-20 u-p-b-20" :class="show ? 'u-border-bottom' : ''">
				<view class="u-flex u-flex-1 u-flex-center" @click="gettabClick(0)">
					<view class="m-c-9" :class="0 === cut ? 'm-c-l-g' : ''">区域</view>
					<u-icon :name="0 === cut ? 'arrow-up' : 'arrow-down'" :color="0 === cut ? '#0D523F' : '#999'" size="10"></u-icon>
				</view>
				<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(1)">
					<view class="m-c-9" :class="1 === cut ? 'm-c-l-g' : ''">总价</view>
					<u-icon :name="1 === cut ? 'arrow-up' : 'arrow-down'" :color="1 === cut ? '#0D523F' : '#999'" size="10"></u-icon>
				</view>
				<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(2)">
					<view class="m-c-9" :class="2 === cut ? 'm-c-l-g' : ''">户型</view>
					<u-icon :name="2 === cut ? 'arrow-up' : 'arrow-down'" :color="2 === cut ? '#0D523F' : '#999'" size="10"></u-icon>
				</view>
				<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(3)">
					<view class="m-c-9" :class="3 === cut ? 'm-c-l-g' : ''">面积</view>
					<u-icon :name="3 === cut ? 'arrow-up' : 'arrow-down'" :color="3 === cut ? '#0D523F' : '#999'" size="10"></u-icon>
				</view>
			</view>
			<view class="m-card m-mg-lr u-m-t-30">
				<view v-if="cut === 0" class="u-p-b-30">
					<u--form labelPosition="left" labelWidth="200rpx" :labelStyle="{ fontSize: '26rpx', color: '#5f5e5f' }" :model="model1">
						<!-- 首付预算 -->
						<u-form-item label="首付预算(万):" prop="userInfo.name" borderBottom>
							<u-search
								shape="square"
								searchIcon=" "
								bgColor="#fff"
								:clearabled="false"
								height="50"
								:showAction="false"
								v-model="model1.userInfo.name"
								inputAlign="right"
								@blur="getblur($event, 1)"
								placeholder="请输入预算"
							></u-search>
						</u-form-item>
						<!-- 几居室 -->
						<u-form-item label="几居室:" prop="userInfo.fang" borderBottom labelWidth="200rpx" @click="show = true">
							<u--input
								v-model="model1.userInfo.fang"
								disabled
								inputAlign="right"
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
								placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize="26rpx"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 房子所在地区 -->
						<u-form-item labelWidth="200rpx" label="房子所在地区:" prop="userInfo.city" borderBottom @click="showa = true">
							<u--input
								v-model="model1.userInfo.city"
								disabled
								inputAlign="right"
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
								placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize="26rpx"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 多大面积 -->
						<u-form-item labelWidth="200rpx" label="多大面积(m²):" prop="userInfo.mian" borderBottom>
							<u-search
								shape="square"
								searchIcon=" "
								bgColor="#fff"
								:clearabled="false"
								height="50"
								:showAction="false"
								v-model="model1.userInfo.mian"
								inputAlign="right"
								@blur="getblur($event, 2)"
								placeholder="请输入面积"
							></u-search>
						</u-form-item>
					</u--form>
				</view>
				<view v-else class="boxgu">
					<view class="cut1-item c62">{{ params.title }}</view>
					<view class="u-flex u-flex-wrap u-m-t-30">
						<view class="cut2-item" v-if="cut === 1" :class="cut1 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
						<view class="cut2-item" v-if="cut === 2" :class="cut2 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
						<view class="cut2-item" v-if="cut === 3" :class="cut3 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
					</view>
				</view>
				<view class="u-abso boxdi">
					<view class="m-mg-lr u-flex u-flex-between boxtap">
						<view class="button-one" @click="getchong">重置</view>
						<view class="button-two " @click="requestStatus ? submit() : ''">提交筛选</view>
					</view>
				</view>
			</view>
			<u-picker :show="show" :columns="actions" @confirm="confirm" :closeOnClickOverlay="true" @cancel="show = false" @close="show = false"></u-picker>
			<u-picker :show="showa" :columns="[getcity]" keyName="name" :closeOnClickOverlay="true" @cancel="showa = false" @close="showa = false" @confirm="getcon"></u-picker>
		</view>
	</view>
</template>

<script>
export default {
	name: 'helpRoom',
	data() {
		return {
			show: false,
			showa: false,
			type: null,
			ids: null,
			cut: 0,
			latitude: null,
			longitude: null,
			covers: [],
			tabList: [
				{
					label: '区域',
					status: false
				},
				{
					label: '总价',
					status: false
				},
				{
					label: '户型',
					status: false
				},
				{
					label: '面积',
					status: false
				}
			],
			show: false,
			model1: {
				userInfo: {
					name: '',
					mian: '',
					fang: '',
					city: ''
				}
			},
			params: {},
			cut1: null,
			cut2: null,
			cut3: null,
			cutname2: null,
			cutname3: null,
			num: null,
			type: 12,
			map: null,
			listdata: {},
			getcity: [],
			city: '',
			typenum: null,
			actions: [['一室一厅', '两室一厅', '两室两厅', '三室两厅', '四房两厅', '四房三厅', '五房两厅', '五房四厅', '六房两厅']],
			pi1: '',
			pit1: ''
		};
	},
	onReady() {
		this.map = uni.createMapContext('map', this);
	},
	async onLoad(e) {
		if (e.type) {
			this.type = +e.type;
		}
		let getcity = uni.getStorageSync('getcity');
		if (getcity) {
			this.getcity = JSON.parse(getcity);
		} else {
			let getcity = await this.require('getcity');
			if (getcity) {
				getcity.unshift({
					id: 0,
					name: '不限'
				});
				this.getcity = getcity;
				uni.setStorageSync('getcity', JSON.stringify(getcity));
			}
		}
	},
	methods: {
		submit() {
			let data = this.model1.userInfo;
			let index = this.cut;
			if (data.name != '' || this.cut1 != null || this.cut2 != null || this.cut3 != null) {
				if (index === 0) {
					if (data.name === '') {
						return uni.$u.toast('请填写预算');
					} else if (data.fang === '') {
						return uni.$u.toast('请选择几居室');
					} else if (data.city === '') {
						return uni.$u.toast('请选择所在地区');
					} else if (data.mian === '') {
						return uni.$u.toast('请填写面积');
					}
				}
				let params = {};
				this.cut === 0
					? (params = this.model1.userInfo)
					: this.cut === 1
					? (params.name = this.params.list[this.cut1].label)
					: this.cut === 3
					? (params.name = this.params.list[this.cut3].label)
					: (params.name = '');
				//总价
				if (this.cut === 1 && this.cut1 === 0) {
					params.price = '2000000以下';
				} else if (this.cut === 1 && this.cut1 === 6) {
					params.pricemax = '10000000以上';
				} else if (this.cut === 1 && this.cut1 < 6) {
					params.price = params.name.split('-')[0] * 10000;
					params.pricemax = params.name.split('-')[1].split('万')[0] * 10000;
				}
				//面积
				if (this.cut === 3 && this.cut3 === 0) {
					params.mian = '40以下';
				} else if (this.cut === 3 && this.cut3 === 7) {
					params.mianm = '200以上';
				} else if (this.cut === 3 && 0 < this.cut3 < 7) {
					params.mian = params.name.split('-')[0].split('m²')[0];
					params.mianm = params.name.split('-')[1].split('m²')[0];
				}

				let list = {
					city: params.city,
					room: this.pit1,
					bedroom: this.pi1 <= 5 ? (this.pi1 == 0 ? '' : this.pi1) : '',
					bedroommax: this.pi1 > 5 ? '五室以上' : '',
					area: this.cut === 0 ? (data.mian < 200 ? data.mian : '') : this.cut === 3 ? params.mian : '',
					areamax: this.cut === 0 ? (data.mian >= 200 ? data.mian : '') : this.cut === 3 ? params.mianm : '',
					price: this.cut === 0 && params.name * 10000 < 5000000 ? params.name * 10000 : this.cut === 1 ? params.price : '',
					pricemax: this.cut === 0 && params.name * 10000 > 5000000 ? params.name * 10000 : this.cut === 1 ? params.pricemax : ''
				};
				let type = this.type == 11 ? 1 : 2;
				for (let var1 in list) {
					if (!list[var1]) {
						delete list[var1];
					}
				}
				this.nextNav('/pages/room/helpRoomList?typu=' + type + '&list=' + JSON.stringify(list));
			} else {
				uni.$u.toast('请选择或填写');
			}
		},
		confirm(e) {
			this.model1.userInfo.fang = e.value[0];
			this.pi1 =
				e.indexs[0] === 0
					? 1
					: e.indexs[0] === 1 || e.indexs[0] === 2
					? 2
					: e.indexs[0] === 3
					? 3
					: e.indexs[0] === 4 || e.indexs[0] === 5
					? 4
					: e.indexs[0] === 6 || e.indexs[0] === 7
					? 5
					: 6;
			this.pit1 = e.indexs[0] === 0 || e.indexs[0] === 1 ? 1 : e.indexs[0] === 5 ? 3 : e.indexs[0] === 7 ? 4 : 2;
			this.show = false;
		},
		getcon(e) {
			this.model1.userInfo.city = e.value[0].name;
			this.showa = false;
		},
		getblur(e, i) {
			if (parseFloat(e).toString() == 'NaN') {
				i === 1 ? (this.model1.userInfo.name = '') : (this.model1.userInfo.mian = '');
				return uni.$u.toast(`请输入数字`);
			}
		},
		getchong() {
			this.model1.userInfo = {
				name: '',
				mian: '',
				fang: '',
				city: ''
			};
			this.cut1 = null;
			this.cut2 = null;
			this.cut3 = null;
			this.pi1 = null;
			this.pit1 = null;
		},
		getin(index, item, cut) {
			this['cut' + this.cut] = index;
			if (this.cut != 0) {
				this['cutname' + cut] = item.label;
			}
			if (cut === 2) {
				let indexk = this.cut2;
				this.pi1 = indexk === 0 ? 1 : indexk === 1 || indexk === 2 ? 2 : indexk === 3 ? 3 : indexk === 4 || indexk === 5 ? 4 : indexk === 6 || indexk === 7 ? 5 : 6;
				this.pit1 = indexk === 0 || indexk === 1 ? 1 : indexk === 5 ? 3 : indexk === 7 ? 4 : 2;
			}
		},
		determine() {
			this.show = false;
		},
		close() {
			this.show = false;
		},
		gettabClick(index) {
			this.cut = index;
			this.params = {};
			this.model1.userInfo = {
				name: '',
				mian: '',
				fang: '',
				city: ''
			};
			this.cut1 = null;
			this.cut2 = null;
			this.cut3 = null;
			this.pi1 = null;
			this.pit1 = null;
			switch (index) {
				case 0:
					// this.citychildname = this.cityall[0].child[0].child[0].name;
					// this.cityindname = this.cityall[0].child[0].name;
					break;
				case 1:
					this.params = {
						title: '价格区间（万）：',
						list: [
							{
								id: 1,
								label: '200万以下'
							},
							{
								id: 2,
								label: '200-300万'
							},
							{
								id: 3,
								label: '300-400万'
							},
							{
								id: 4,
								label: '400-500万'
							},
							{
								id: 5,
								label: '500-800万'
							},
							{
								id: 6,
								label: '800-1000万'
							},
							{
								id: 4,
								label: '1000万以上'
							}
						]
					};
					break;
				case 2:
					this.params = {
						title: '房型选择',
						list: [
							{
								id: 1,
								label: '一室一厅'
							},
							{
								id: 2,
								label: '两室一厅'
							},
							{
								id: 3,
								label: '两室两厅'
							},
							{
								id: 4,
								label: '三室两厅'
							},
							{
								id: 5,
								label: '四房两厅'
							},
							{
								id: 6,
								label: '四房三厅'
							},
							{
								id: 7,
								label: '五房两厅'
							},
							{
								id: 8,
								label: '五房四厅'
							},
							{
								id: 9,
								label: '六房两厅'
							}
						]
					};
					break;
				case 3:
					this.params = {
						title: '建筑面积',
						list: [
							{
								id: 1,
								label: '50m²以下'
							},
							{
								id: 2,
								label: '50m²-70m²'
							},
							{
								id: 3,
								label: '70m²-90m²'
							},
							{
								id: 4,
								label: '90m²-110m²'
							},
							{
								id: 5,
								label: '110m²-130m²'
							},
							{
								id: 6,
								label: '130m²-150m²'
							},
							{
								id: 7,
								label: '150m²-200m²'
							},
							{
								id: 8,
								label: '200m²以上'
							}
						]
					};
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.m-c-l-g {
	color: #0d523f;
}

.c62 {
	color: #636262;
}

.boxdi {
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	height: 114rpx;
}

.boxtap {
	margin-top: 23rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.button-one {
	border: 1rpx solid #0e5642;
	width: 40%;
	line-height: 80rpx;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	border-radius: 12rpx;
	color: #0e5642;
}

.button-two {
	width: 40%;
	line-height: 80rpx;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	border-radius: 12rpx;
	color: #fff;
	background: #0e5642;
}

.boxgu {
	height: 450rpx;
	overflow-y: auto;
	background-color: #fff;
}

.u-safe-bottom {
	display: none;
}

.cut1-item {
	text-indent: 2em;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #eee;
}

.cut3-item {
	height: 60rpx;
	line-height: 60rpx;
	text-indent: 2em;
	color: #606060;
}

.cut2-item {
	display: inline-block;
	padding: 0 30rpx;
	background-color: #eee;
	border-radius: 10rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 25rpx;
	margin-bottom: 20rpx;
	color: #606060;
}

.item-on {
	background-color: #0e5642 !important;
	color: #ffffff;
}

.itemon {
	color: #0e5642;
	font-size: 32rpx;
}

.Reset {
	width: 50%;
	height: 60rpx;
	background-color: '#0e5642';
}

.button-two {
	color: white;
	text-align: center;
	background-color: #0e5642;
	line-height: 60rpx;
	height: 60rpx;
	// border-bottom-right-radius: 10rpx;
}

.button-one {
	color: #646262;
	text-align: center;
	line-height: 60rpx;
	height: 60rpx;
	// border-bottom-left-radius: 10rpx;
}

.boxrea {
	border-bottom-left-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
}
</style>
